<template>
	<view class="searchpage">
		<view class="search">
			<view class="search-box" @click="onshow">
				<u-search placeholder="请输入搜索内容" v-model.trim="val" @custom="searchBook" @search="searchBook"></u-search>
			</view>
		</view>
		<view class="result" v-if="bookresult==false">
			<view class="box" v-if="val.length==0">
				<view class="search_history">
					<view class="history-box">
						<view class="history-text">历史搜索</view>
						<view class="history-icon">
							<image src="../../static/del.png" mode="" @click="deleteHistory"></image>
						</view>
					</view>
					<view class="history-content">
						<block v-for="(i,ind) in arr" :key="ind">
							<view class="history-content-item" @click="searcHistory(i)">
								{{i}}
							</view>
						</block>
					</view>
				</view>
				<view class="hot-search">
					<view class="hot-search">
						热门搜索
					</view>
					<view class="hot-content">
						<block v-for="(i,ind) in list" :key="ind">
							<view class="hot-item" @click="searcHistory(i.name)">
								{{i.name}}
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="box" v-if="val.length!=0">
				<view class="show" v-if="show">
					
					<block v-for="(i,ind) in searchlist" :key="ind">
						<view class="show-item">
							<view class="book-imgs">
								<image src="../../static/searchbook.png" mode=""></image>
							</view>
							<view class="list-item" @click="switchDetail(i.id,i.text)">
								{{i.text}}
							</view>
						</view>
						
					</block>
				</view>
				<view class="hidd" v-if="show==false">
					<image src="../../static/kong1.png" mode=""></image>
				</view>

			</view>

		</view>
		<view class="result" v-if="bookresult">
			<view class="res" v-if="isresult">
				<block v-for="(i,ind) in searchresult" :key="ind">
					<view class="result-item" @click="switchDetail(i.bookId,i.title)">
						<view class="result-img">
							<image :src="i.cover" mode="" @error="error(ind)"></image>
						</view>
						<view class="result-content">
							<view class="result-title">
								{{i.title}}
				
							</view>
							<view class="result-author">
								{{i.author}}
							</view>
							<view class="result-summary">
								{{i.summary}}
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="res kong" v-if="isresult==false">
				<image src="../../static/kong1.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSearchSuggest,
		getSearchResult
	} from "../../api/index.js"
	export default {
		data() {
			return {
				val: "",
				arr: [],
				searchlist: [],
				searchresult: [],
				list: [{
						"bookType": 0,
						"hot": 3,
						"id": "bd_6b4b68cd992944c7aec1ff4df7ca9fbf_4",
						"name": "一剑独尊"
					},
					{
						"bookType": 0,
						"hot": 2,
						"id": "bd_119176de3b7b49bf9394e12ed5e94996_4",
						"name": "官藏"
					},
					{
						"bookType": 0,
						"hot": 1,
						"id": "ts_6719f870782d4e799c57fc3c1653156a_4",
						"name": "师娘，请自重"
					},
					{
						"bookType": 0,
						"hot": 0,
						"id": "bd_d3ce52f8c6814c1ea68a0e5e6ef54ba8_4",
						"name": "天骄战纪"
					}
				],
				show: false,
				bookresult: false,
				isresult:false
			}
		},
		onShow() {
			let history = uni.getStorageSync("history")
			console.log(history);
			this.arr = history
		},
		methods: {
			searcHistory(val){
				console.log(val);
				this.bookresult = true
				getSearchResult(val).then(res => {
					if(res.data.books.length!=0){
						this.searchresult = res.data.books
						this.isresult=true
					}else{
						this.isresult=false
					}
				})
				this.val = ""
			},
			error(ind){
				let arr=this.searchresult[ind]
				arr.cover="../../static/1.jpg"
			},
			onshow() {
				this.bookresult = false
			},
			switchDetail(id, title) {
				// this.setHistory(title)
				uni.navigateTo({
					url: `../detail/detail?id=${id}&title=${title}`
				})
				this.val = ""
			},
			//记录搜索记录
			setHistory(val) {
				if(val.length==0){
					return
				}
				let history = uni.getStorageSync("history")
				if (history.length == 0) {
					let arrs = []
					arrs.push(this.val)
					this.arr = arrs
					uni.setStorageSync("history", arrs)
					let history = uni.getStorageSync("history")
				} else {
					let hist = uni.getStorageSync("history")
					if (hist.indexOf(this.val) == -1) {
						hist.push(this.val)
						uni.setStorageSync("history", hist)
						this.arr = hist
					}
				}
			},
			searchBook() {
				if(this.val.length==0){
					uni.showToast({
						title:"内容不能为空",
						icon:"none"
					})
					return
				}
				uni.showLoading({
					title: '正在加载...',
				});
				this.bookresult = true
				getSearchResult(this.val).then(res => {
					console.log(res);
					if(res.data.books.length!=0){
						this.searchresult = res.data.books
						this.isresult=true
						uni.hideLoading();
						}else{
							this.isresult=false
							uni.hideLoading();
						}
				})
				this.setHistory(this.val)
				this.val = ""
			},
			deleteHistory() {
				uni.removeStorageSync("history")
				this.arr = []
			}
		},
		watch: {
			val: {
				handler(val, oldVal) {
					console.log(val.length);
					uni.showLoading({
						title: '正在加载...',
					});
					getSearchSuggest(val).then(res => {
						console.log(res.words.w,111);
						console.log(res.words.w instanceof Array);
						if (res.words.w != undefined) {
							//判断是否为数组
							if(res.words.w instanceof Array){
								this.show = true
								this.searchlist = res.words.w
								uni.hideLoading();
							}else{
								let arr=[]
								arr.push(res.words.w)
								this.searchlist = arr
								uni.hideLoading();
							}
							
						} else {
							this.show = false
							uni.hideLoading();
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.searchpage {
		.res.kong,.hidd.kong{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.result {
			box-sizing: border-box;
			padding: 0 30rpx;
			.result-item {
				display: flex;
				margin: 20rpx 0;
			}

			.result-img {
				width: 200rpx;
				height: 260rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.result-content {
				box-sizing: border-box;
				flex: 1;
				padding: 0 20rpx;

				.result-title {
					font-weight: bold;
				}

				.result-author {
					color: #878787;
					font-size: 14px;
					margin: 10px 0;
				}

				.result-summary {
					font-size: 13px;
					line-height: 20px;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
				}
			}
		}

		.box {
			box-sizing: border-box;
			margin-top: 20rpx;

			.show {
				box-sizing: border-box;
				padding: 0 10rpx;
				.show-item{
					display: flex;
					align-items: center;
				}
			}
			.book-imgs{
				margin-right: 10rpx;
				width: 36rpx;
				height: 36rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}

			.list-item {
				font-size: 32rpx;
				margin: 13rpx 0;
			}
		}

		.search {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}

		.search-box {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 100%;
			padding: 0 20rpx;
		}

		.search_history {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 20rpx;

			.history-box {
				display: flex;
				justify-content: space-between;

				.history-text {
					flex: 1;
					font-size: 36rpx;
					font-weight: bold;
				}

				.history-icon {
					width: 100rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.history-content {
				display: flex;
				flex-wrap: wrap;

				.history-content-item {
					margin: 20rpx 20rpx 8rpx 0;
					background-color: #efefef;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 6rpx 20rpx;
					font-size: 13px;
				}
			}
		}

		.hot-search {
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 10rpx;

			.hot-search {
				font-size: 36rpx;
				font-weight: bold;
			}

			.hot-content {
				padding: 0 10rpx;
				display: flex;
				flex-wrap: wrap;

				.hot-item {
					margin: 10rpx 20rpx 8rpx 0;
					background-color: #f9834a;
					color: white;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 6rpx 20rpx;
					font-size: 13px;
				}
			}
		}
	}
</style>